@use '@material/elevation/index' as elevation;
@use '@material/theme/index' as theme;
@use '@material/feature-targeting/index' as feature-targeting;
@use '@material/shape/index' as shape;
@use '@material/typography/index' as typography;

$paper-padding: 24px 16px !default;

@mixin core-styles($query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);
  $feat-animation: feature-targeting.create-target($query, animation);
  $feat-structure: feature-targeting.create-target($query, structure);

  .smui-paper {
    padding: $paper-padding;

    &.smui-paper--raised,
    &.smui-paper--unelevated {
      @include fill-color(surface, $query);
      @include ink-color(on-surface, $query);
    }

    &.smui-paper--raised {
      @include paper-elevation($query: $query);
    }

    &.smui-paper--outlined {
      @include outline-color(on-surface, $query);
    }

    &.smui-paper--rounded {
      @include shape-radius(medium, $query: $query);
    }

    &.smui-paper-transition {
      @include feature-targeting.targets($feat-animation) {
        transition: elevation.transition-value();
      }

      @include feature-targeting.targets($feat-structure) {
        will-change: elevation.$property;
      }
    }

    .smui-paper__title {
      @include typography.typography(headline5, $query);
      margin-top: 0;
      margin-bottom: 0.4rem;
    }

    .smui-paper__subtitle {
      @include typography.typography(subtitle1, $query);
      margin-top: -0.2rem;
      margin-bottom: 0.4rem;
    }

    .smui-paper__content {
      @include typography.typography(body1, $query);
    }
  }

  @include paper-color(primary, primary, on-primary, $query);
  @include paper-color(secondary, secondary, on-secondary, $query);
}

@mixin paper-color(
  $name,
  $fill-color,
  $ink-color,
  $query: feature-targeting.all()
) {
  .smui-paper.smui-paper--color-#{$name} {
    &.smui-paper--raised,
    &.smui-paper--unelevated {
      @include fill-color($fill-color, $query);
      @include ink-color($ink-color, $query);
    }

    &.smui-paper--raised {
      @include paper-elevation($fill-color, $query: $query);
    }

    &.smui-paper--outlined {
      @include outline-color($fill-color, $query);
    }
  }
}

@mixin shape-radius(
  $radius,
  $rtl-reflexive: false,
  $query: feature-targeting.all()
) {
  @include shape.radius($radius, $rtl-reflexive, $query: $query);
}

@mixin ink-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  @include feature-targeting.targets($feat-color) {
    @include theme.property(color, $color);
  }
}

@mixin fill-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  @include feature-targeting.targets($feat-color) {
    @include theme.property(background-color, $color);
  }
}

@mixin outline-color($color, $query: feature-targeting.all()) {
  $feat-color: feature-targeting.create-target($query, color);

  border-width: 1px;
  border-style: solid;

  @include feature-targeting.targets($feat-color) {
    @include theme.property(border-color, $color);
  }
}

@mixin paper-elevation(
  $color: elevation.$baseline-color,
  $query: feature-targeting.all()
) {
  @for $i from 0 through 24 {
    &.smui-paper--elevation-z#{$i} {
      @include elevation.elevation($i, $color, $query: $query);
    }
  }
}
